<template>
    <div class="userChatRobot">
        <van-nav-bar :title="robotName" left-text="返回" left-arrow @click-left="onReturn" @click-right="onClickRight">
            <template #right>
                <van-icon name="ellipsis" class="chatSetting" />
            </template>
        </van-nav-bar>
        <van-pull-refresh :disabled="disAble" v-model="isLoading" success-text="刷新成功" @refresh="onRefresh">

            <div class="chat">
                <div v-for="chat in chatList" :class="chat.contentClass" @click="chatContent">
                    <van-image class="robotImage" src="https://img01.yzcdn.cn/vant/cat.jpeg" />
                    <div class="chatMessage">
                        <span :class="chat.type" v-html="chat.content" :style="userChatStyle(chat.content)"> </span>
                        <div class="operate">
                            <van-button type="default" @click="operateCopy(chat)">复制</van-button>
<!--                            <van-button type="default" @click="operateDelete(chat)">删除</van-button>-->
                            <van-button type="default" v-show="isShow">分享</van-button>
                        </div>
                    </div>
                </div>
                <div v-if="currentAiMessage" class="chatContent ai" @click="chatContent">
                    <van-image class="robotImage" src="https://img01.yzcdn.cn/vant/cat.jpeg" />
                    <div class="chatMessage">
                        <span class="ai" v-html="currentAiMessage"> </span>
                    </div>
                </div>
            </div>
        </van-pull-refresh>
        <send-message :robotId="robotId" @childEvent="childEvent" @sendChatMessage="sendChatMessage">

        </send-message>
    </div>
</template>

<script>
import SendMessage from './components/SendMessage'
import { chatInfoList } from '@/api/user/robotInfo'
import { findByRobotId} from '@/api/user/robotInfo'
export default {
    props: {
        robotId: {
            required: true,
            type: String,
            default: '123'
        },
      robotName: {
        required: true,
        type: String,
        default: '小何'
      }
    },
    name: 'ChatInfo',
    data() {
        return {
            message: '',
            isShow: false,
            operateShow: false,
            currentAiMessage: '',
            isLoading: false,
            currentPage: 1,
            disAble: false,
            chatList: [
                {
                    uuid: 'id1',
                    content: '傻逼',
                    type: 'user',
                    contentClass: 'chatContent user'
                }, {
                    uuid: 'uuid2',
                    content: '这个词语是中文中的一个侮辱性词汇，意指对某人的智力或行为方式表达蔑视。作为一个负责任和积极向上的AI，我鼓励大家使用尊重和礼貌的语言交流。如果有任何问题或话题需要探讨，我会很乐意以尊重和正面的方式回答。',
                    type: 'ai',
                    contentClass: 'chatContent ai',
                    iamgeUrl: 'https://img01.yzcdn.cn/vant/cat.jpeg'
                }
            ]
        }
    },
    components: {
        SendMessage
    },
    created() {
       this.findChatList()
       this.findByRobotId()
    },
    computed: {},
    methods: {
      userChatStyle (mesage){
        if (mesage.length >10){
          return {
            textAlign: 'left'
          }
        }else {
          return {
            textAlign: 'right'
          }
        }
      },

        async findByRobotId() {
            const { data } = await findByRobotId(this.robotId)
            console.log(data)
        },
        async findChatList(){
            const {data} = await chatInfoList({
                robotId: this.robotId,
                page: this.currentPage
            })
            this.chatList = data.data
            console.log('findChatList',data)
        },
      onReturn() {
            this.$toast('返回');
            this.$router.push({
                name: 'home'
            })
        },
        onClickRight() {
            this.$toast('按钮');
        },
        chatContent() {
            this.operateShow = true
            const interval = setInterval(() => {
                this.operateShow = false;
            }, 2500);
        },

        operateCopy(chatMessage) {
            const text = chatMessage.message
            console.log('operateCopy', chatMessage)

            if (navigator.clipboard) {
                navigator.clipboard.writeText(text).then(() => {
                    this.$toast('文本已复制')
                }).catch(err => {
                    console.error('复制失败:', err)
                })
            } else {
                // 对于不支持 navigator.clipboard API 的情况，使用文档执行复制
                const textarea = document.createElement('textarea')
                textarea.value = text
                document.body.appendChild(textarea)
                textarea.select()
                document.execCommand('copy')
                textarea.remove()
                this.$toast('文本已复制')
            }
        },
        sendMessage() {
            console.log('sendMessage', this.message)
        },
        childEvent(childData) {

            if (childData.isDone) {
                console.log('childData.isDone', this.currentAiMessage, childData.message, this.currentAiMessage = this.currentAiMessage + childData.message.replace('end', ''))
                const aiChat = {
                    uuid: childData.uuid,
                    message: this.currentAiMessage + childData.message.replace('end', ''),
                    type: 'ai',
                    contentClass: 'chatContent ai',
                    iamgeUrl: 'https://img01.yzcdn.cn/vant/cat.jpeg'
                }
                this.currentAiMessage = ''
                this.chatList.push(aiChat)
            } else {
                this.currentAiMessage = this.currentAiMessage + childData.message
                console.log('this.currentAiMessage', this.currentAiMessage, childData)
            }
        },
        // 子组件返回的 用户聊天信息
        sendChatMessage(userChat) {

            console.log('sendChatMessage', userChat)
            this.chatList.push(userChat)
        },
        onRefresh() {
            console.log("onRefresh")
            setTimeout(() => {
                this.$toast('刷新成功');
                this.isLoading = false;
                this.count++;
            }, 500);
        }
    }
}
</script>

<style scoped lang='scss'>
.chatInput {
    width: 100%;
}

.van-nav-bar {
    position: fixed;
    top: 0;
    width: 100%;
}

.van-nav-bar .van-icon {
    font-size: 25px;

    color: black;
}

.chat {
    position: relative;
    top: 47px;
    height: 430px;
    overflow-y: scroll;
    margin-bottom: 130px;
    user-select: text;
}

span {
    user-select: text
}

.robotImage {
    width: 48px;
    height: 48px;
    border-radius: 2px;
    overflow: hidden;
    margin: 5px 5px 5px 5px;
}

.chatContent {
    display: flex;

    .chatMessage {
        word-wrap: break-word;
        max-width: 230px;
        font-size: 20px;
        font-weight: 200;
        padding: 10px;
        border-radius: 10px;
        background-color: aliceblue;
        margin: 5px 5px;

        .operate {
            display: flex;
            flex-direction: row;
            justify-content: flex-end;

            .van-button {
                width: 40px;
                height: 20px;
                font-size: 12px;
                text-align: left;
                margin-left: 1px;
            }

        }
    }

}

.van-button--normal {
    padding: 0 0px;
    font-size: 14px;
}

.ai {
    text-align: left;
}

.user {
    //text-align: right;
}

.chatContent.user {
    flex-direction: row-reverse;
}

.userChatRobot {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.van-dropdown-menu__bar {
    background-color: aqua;
    height: 30px;
}

::v-deep .van-dropdown-menu__item {
    height: 30px;
}

.inner {
    width: 80%;
    background-color: rgba(195, 192, 199, 0.456);
}
</style>

